<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>jquery.bsgrid</title>
    <style type="text/css">
        body {
            font-size: 16px;
            color: #333;
            line-height: 24px;
            background-color: white;
            padding: 10px;
        }

		.tabImg {
			width: 100%;
			border-collapse: collapse;
		}
		.tabImg td {
	        color: green;
			border: solid 1px green;
	        background-color: white;
			padding: 0;
			margin: 0;
	        text-align: center;
	        vertical-align: top;
		}
		.tabImg td img{
			width: 100%;
			border: solid 0 white;
		}
    </style>
</head>
<body>
<a style="font-size: 48px; color: green; text-decoration: none; font-weight: 400;" href="http://git.oschina.net/bs2004/jquery.bsgrid" target="_blank">jquery bsgrid</a>
&emsp;一个简单易用的jQuery Grid插件，支持分页或不分页，支持json、xml数据格式，对导出友好，扩展性友好。
<br /><br />
项目源码：<a href="http://git.oschina.net/bs2004/jquery.bsgrid" target="_blank">http://git.oschina.net/bs2004/jquery.bsgrid</a>
<br />
示例演示：<a href="examples/en-table.html" target="_blank">表格方式</a>&emsp;<a href="examples/en.html" target="_blank">导航方式</a>
<br />
详细介绍：<a href="README.md.html" target="_blank">http://bsgrid.oschina.mopaas.com/README.md.html</a>
<br />
离线文档：<a href="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/README.md.pdf" target="_blank">http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/README.md.pdf</a>
<br /><br />
<h2>给出典型多套皮肤效果图示如下：</h2>
<table class="tabImg">
	<tr>
		<td>ExtJS Gray Style
            <br />
            <a href="http://bsgrid.oschina.mopaas.com/examples/grid/themes/gray.html" target="_blank">
            <img title="ExtJS Gray Style" src="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/WebContent/documention/images/jquery.bsgrid-skins01-ExtJS Gray Style.png"></a>
        </td>
		<td>ExtJS Blue Style
            <br />
            <a href="http://bsgrid.oschina.mopaas.com/examples/grid/themes/blue.html" target="_blank">
            <img title="ExtJS Blue Style" src="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/WebContent/documention/images/jquery.bsgrid-skins02-ExtJS Blue Style.png"></a>
        </td>
    </tr>
    <tr>
		<td>ExtJS Access Style
            <br />
            <a href="http://bsgrid.oschina.mopaas.com/examples/grid/themes/access.html" target="_blank">
            <img title="ExtJS Access Style" src="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/WebContent/documention/images/jquery.bsgrid-skins03-ExtJS Access Style.png"></a>
        </td>
		<td>FlexiGrid Gray Style
            <br />
            <a href="http://bsgrid.oschina.mopaas.com/examples/grid/themes/flexigrid.html" target="_blank">
            <img title="FlexiGrid Gray Style" src="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/WebContent/documention/images/jquery.bsgrid-skins04-FlexiGrid Gray Style.png"></a>
        </td>
    </tr>
    <tr>
		<td>Dhtmlx Sky Blue Style
            <br />
            <a href="http://bsgrid.oschina.mopaas.com/examples/grid/themes/sky_blue.html" target="_blank">
            <img title="Dhtmlx Sky Blue Style" src="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/WebContent/documention/images/jquery.bsgrid-skins05-Dhtmlx Sky Blue Style.png"></a>
        </td>
		<td>Custom Blue Style
            <br />
            <a href="http://bsgrid.oschina.mopaas.com/examples/grid/themes/custom.html" target="_blank">
            <img title="Custom Blue Style" src="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/WebContent/documention/images/jquery.bsgrid-skins06-Custom Blue Style.png"></a>
        </td>
    </tr>
</table>
<br />
<h2>bsgrid的特点：</h2>
1，轻量级，基于jQuery及HTML Table，除了对加载数据、分页、渲染数据的简单封装外，不额外增加特别的功能；模块化JS代码，可按需加载；CSS样式精致简洁，对于扩展修改非常容易；
<br />
2，使用友好，对于一个简单的表格展现，仅仅数十行代码即可完成，并且支持json、xml两种数据格式；且支持友好的导出参数构建；
<br />
3，内置多套经典样式风格，效果参看examples\grid\themes\*.html；可非常容易的修改表格使用字体大小，参看示例examples\grid\themes\custom.html，仅需修改该示例样式中的两处font-size即可；
<br />
4，自带load加载数据遮罩，并很容易进行扩展或重写；
<br />
5，扩展性好，插件有特别好的扩展性，易于对插件本身进行局部甚至较大的修改，易于改变展现样式、渲染数据；插件放开了属性及方法的全局修改权限，所有方法都可在外部进行全局重写，而无需修改插件本身的代码。
<br />
<h2>入门示例</h2>
<img src="http://static.oschina.net/uploads/img/201410/17111132_ed66.png" alt="Simple Grid" /> 
<pre style="font-size: 12px; background-color: #eee;">
引用文件：
    &lt;link rel="stylesheet" href="../../builds/merged/grid.simple.min.css"/&gt;
    &lt;script type="text/javascript" src="../../plugins/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../../builds/js/lang/grid.en.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../../builds/merged/grid.simple.min.js"&gt;&lt;/script&gt;
实现代码：
    &lt;table id="searchTable" class="bsgrid"&gt;
        &lt;tr&gt;
            &lt;th w_index="XH" width="5%;"&gt;XH&lt;/th&gt;
            &lt;th w_index="ID" width="5%;"&gt;ID&lt;/th&gt;
            &lt;th w_index="CHAR" w_align="left" w_tip="true" width="15%;"&gt;CHAR&lt;/th&gt;
            &lt;th w_index="TEXT" w_align="left" w_length="50" width="30%;"&gt;TEXT&lt;/th&gt;
            &lt;th w_index="DATE" width="15%;"&gt;DATE&lt;/th&gt;
            &lt;th w_index="TIME" width="15%;"&gt;TIME&lt;/th&gt;
            &lt;th w_index="NUM" width="5%;"&gt;NUM&lt;/th&gt;
            &lt;th w_render="operate" width="10%;"&gt;Operate&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;script type="text/javascript"&gt;
        $(function () {
            $.fn.bsgrid.init('searchTable', {
                url: 'data/simple.json',
                // autoLoad: false,
                pageSizeSelect: true,
                pageSize: 10
            });
        });
    
        function operate(record, rowIndex, colIndex, options) {
            return '&lt;a href="#" onclick="alert(\'ID=' + record['ID'] + '\');"&gt;Operate&lt;/a&gt;';
        }
    &lt;/script&gt;
</pre>
</body>
</html>